<template>
  <ul class="others">
    <li v-for="(item, index) in otherList" :key="index" @click="onOtherDetail(index)">
      <div class="left">
        <van-icon :name="item.icon" class="iconcolor" size="0.64rem" />
        <span>{{ item.title }}</span>
      </div>
      <div class="right">
        <p>{{ item.txt1 }}</p>
        <p>{{ item.txt2 }}</p>
      </div>
    </li>
  </ul>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'OtherView',
  data () {
    return {
      otherList: [
        { title: '会员中心', url: '/member', icon: 'gem', txt1: '最新会员权益，每月可领取100元优惠券', txt2: '商品可使用会员价购买' },
        { title: '领券中心', url: '/coupon', icon: 'coupon', txt1: '部分商品满199减100', txt2: '素材元件满5件打5折' },
        { title: '积分中心', url: '/integral', icon: 'bookmark', txt1: '购买商品 +12', txt2: '傻瓜品折扣减100' },
        { title: '我的评价', url: '/isnull', icon: 'thumb-circle', txt1: '2019-09-09 好评：交互细节非常棒', txt2: '2019-09-09 好评：交互细节非常棒' }
      ]
    }
  },
  methods: {
    onToast () {
      Toast('功能待开发')
    },
    onOtherDetail (index) {
      const url = this.otherList[index].url
      this.$router.push(url)
    }
  }
}
</script>

<style lang="scss" scoped>
.others {
  width: 7.1rem;
  margin: 0.2rem auto;
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
  background-color: #fff;
  li {
    display: flex;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 1.6rem;
      height: 1rem;
      margin: 0.3rem 0;
      margin-right: 0.3rem;
      border-right: 0.01rem solid #e0e0e0;
      span {
        padding-top: 0.1rem;
        font-size: 0.24rem;
        color: #333;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        padding-bottom: 0.1rem;
        font-size: 0.24rem;
        color: #666;
      }
    }
    .iconcolor {
      background: linear-gradient(to bottom, #fad769 0%, #f6691d 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
